<template>
    <div class="principle">
        <LidarHeader />
 
        <PrincipleListView /> 
        <div audio :style="divAudioStyle" v-show="PrincipleComponent.Default.Description.value != ''">
            <span :style="descriptionStyle">
                {{
                        PrincipleComponent.Default.Description.value
                }}
            </span>
            <img src="/static/Lidar/icon-foldout.png" alt="音频" title="" @click="OnSwitch">
        </div>
        <!-- <span v-show="PrincipleComponent.Default.Description.value != ''">
            {{ PrincipleComponent.Default.Description.value }}
        </span>
        <img src="/static/Lidar/icon-foldout.png" alt="音频" title="" @click="OnSwitch"> -->
        <!-- <Speak :stats="StructureComponent.Default.AudioStats" v-if="PrincipleComponent.Default.Description.value != ''" hidden>
            {{ PrincipleComponent.Default.Description.value }}
        </Speak> -->
        <Speak hidden :stats="stats"
            v-if="PrincipleComponent.Default.Description.value != '' && PrincipleComponent.Default.DescriptionAudioAccessibility.value">
            {{ PrincipleComponent.Default.Description.value }}
        </Speak>

        <LidarNav ref="LidarNavRef"/>
    </div>
</template>

<script setup lang="ts">
import Speak from '@components/TTS/Speak.vue';
// import { onMounted, onUnmounted, reactive } from 'vue';
import { computed, ComputedRef, onMounted, onUnmounted, reactive, ref, StyleValue } from 'vue';
import { PrincipleComponent } from './LidarComponent';
import LidarHeader from './LidarHeader.vue';
import LidarNav from './LidarNav.vue';
import PrincipleListView from './PrincipleListView.vue';
import { StructureComponent } from './LidarComponent';
const LidarNavRef = ref()
const stats = reactive({ pausable: false });

function OnSwitch(): void { 
    PrincipleComponent.Default.DescriptionAudioAccessibility.value = !PrincipleComponent.Default.DescriptionAudioAccessibility.value;
    stats.pausable = !stats.pausable;
    LidarNavRef.value.changeModel()
}

const divAudioStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            backgroundColor: PrincipleComponent.Default.DescriptionAudioAccessibility.value ? '#131620' : 'transparent',
        } as StyleValue;
    }
);

const descriptionStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            visibility: PrincipleComponent.Default.DescriptionAudioAccessibility.value ? 'visible' : 'hidden',
        } as StyleValue;
    }
);

onMounted(() => PrincipleComponent.Default.Awake());
onUnmounted(() => PrincipleComponent.Default.Destroy());
</script>

<style scoped>
div[audio] {
    position: absolute;
    bottom: 6rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 3rem;

    background-color: #131620;
    border-radius: 2rem;
}

div[audio]>span {
    color: #BEBEFF;
    font-size: 1.8em;

    text-indent: 2em;
}

div[audio]>img {
    width: 3rem;
    height: 3rem;

    position: absolute;
    top: 1rem;
    right: 1rem;

    border-radius: 50%;
    background-color: #131620;

    pointer-events: auto;
}
/* .principle>span {
    position: absolute;
    bottom: 6rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 2rem;

    background-color: #131620;
    border-radius: 2rem;

    color: #BEBEFF;
    font-size: 1.8em;

    text-indent: 2em;
} */
</style>./LidarComponent./LidarComponent